<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('表尾合计行')}`">{{ $t('表尾合计行') }}</t>
            <li>
                将<span class="d-code">show-summary</span>设置为<span class="s-code">true</span>就会在表格尾部展示合计行。
                合计行的第一列不会进行数据求合操作，而是显示「合计」二字（可通过<span class="d-code">sum-text</span>配置），其余列会将本列所有数值进行求合操作，并显示出来。
            </li>
            <li>
                如果你需要自定义合计逻辑。你可以使用
                <span class="d-code">summary-method</span>并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中
            </li>
        </template>
        <sib-table show-summary :table-column="tableColumn" :table-data="tableData" :summary-method="getSummaries"></sib-table>
    </example>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const tableData = ref(Array(8).fill().map((_, i) => ({
            id: i + 1,
            name: `张三${i + 1}号`,
            sex: i % 2 ? '男' : '女',
            deposit: 10086 + i * 6666,
            status: '未婚',
            age: i + 20,
        })));
        const getSummaries = ({ columns, data }) => columns.map(
            (column, index) => {
                // 第一列展示 "合计"
                if (index === 0) return '合计';
                // 不是存款列，都展示空
                if (column.property !== 'deposit') return '';
                // 获取该列所有值
                const values = data.map((item) => Number(item[column.property]));
                // 如果所有值都不是数字则返回 'N/A'
                if (values.every((value) => Number.isNaN(value))) return 'N/A';
                // 数字求和
                const sum = values.reduce((prev, curr) => (Number.isNaN(Number(curr)) ? prev : prev + curr), 0);
                // 金额格式化；框架在 window.SIB 上挂载了很多便利性方法，formatMoney 格式化金额是其中的一个
                return window.SIB.formatMoney(sum, 0);
            },
        );

        return {
            tableColumn: [
                { label: '姓名', code: 'name' },
                { label: '性别', code: 'sex' },
                { label: '年龄', code: 'age' },
                { label: '身高', code: 'height' },
                { label: '状态', code: 'status' },
                // 框架在 window.SIB 上挂载了很多便利性方法，formatMoney 格式化金额是其中的一个
                { label: '存款', code: 'deposit', formatter: (row) => window.SIB.formatMoney(row.deposit, 0) },
            ],
            tableData,
            getSummaries,
            templateString: `<template>
    <div class="example-box">
        <sib-table show-summary :table-column="tableColumn" :table-data="tableData" :summary-method="getSummaries"></sib-table>
    </div>
</template>

<script>
export default {
    setup() {
        const tableData = ref(Array(8).fill().map((_, i) => ({
            id: i + 1,
            name: \`张三\${i + 1}号\`,
            sex: i % 2 ? '男' : '女',
            deposit: 10086 + i * 6666,
            status: '未婚',
            age: i + 20,
        })));
        const getSummaries = ({ columns, data }) => columns.map(
            (column, index) => {
                // 第一列展示 "合计"
                if (index === 0) return '合计';
                // 不是存款列，都展示空
                if (column.property !== 'deposit') return '';
                // 获取该列所有值
                const values = data.map((item) => Number(item[column.property]));
                // 如果所有值都不是数字则返回 'N/A'
                if (values.every((value) => Number.isNaN(value))) return 'N/A';
                // 数字求和
                const sum = values.reduce((prev, curr) => (Number.isNaN(Number(curr)) ? prev : prev + curr), 0);
                // 金额格式化；框架在 window.SIB 上挂载了很多便利性方法，formatMoney 格式化金额是其中的一个
                return window.SIB.formatMoney(sum, 0);
            },
        );

        return {
            tableColumn: [
                { label: '姓名', code: 'name' },
                { label: '性别', code: 'sex' },
                { label: '年龄', code: 'age' },
                { label: '身高', code: 'height' },
                { label: '状态', code: 'status' },
                // 框架在 window.SIB 上挂载了很多便利性方法，formatMoney 格式化金额是其中的一个
                { label: '存款', code: 'deposit', formatter: (row) => window.SIB.formatMoney(row.deposit, 0) },
            ],
            tableData,
            getSummaries,
        };
    },
};
<\/script>`,
        };
    },
};
</script>
